<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax_fn.js"></script>
    <script src="../js/request.js"></script>
    <script src="..//js/register_async.js"></script>
    <title>Document</title>
    <style>
        .createCode{
            /* 用户选中 */
            user-select: none;   
        }
        .right{
            font-size: 12px;
            color: green;
        }
        .err{
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label>邮&emsp;箱:</label>
            <input class="email" type="text">
            <span class="email_span"></span>
        </p>
        <p>
            <label>手机号:</label>
            <input class="phone" type="text">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input type="text" class="code">
            <i class="createCode"></i>
            <span class="code_span"></span>
            
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</div>

<script>
// cookie 模拟注册登录 注册时存cookie(用户名 密码 邮箱 手机号) 登录时取cookie中的用户名和密码 和 用户输入的做对比

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeSpan = document.getElementsByClassName("code_span")[0];
    var createCodeSpan = document.getElementsByClassName("createCode")[0];
    var sapnList = document.querySelectorAll(".box p span")
    
    var btn = document.getElementsByClassName("btn")[0];  
    // console.log(sapnList);


    var numList = [];
    for (var i = 48; i <= 57; i++) {          //数字集合
        var char = String.fromCharCode(i);
        // console.log(char);
        numList.push(char);
    }

    var bigList = [];
    for (var i = 65; i <= 90; i++) {          //大写字母集合
        var char = String.fromCharCode(i);
        // console.log(char);
        bigList.push(char);
    }

    var smallList = [];
    for (var i = 97; i <= 122; i++) {         //小写字母集合
        var char = String.fromCharCode(i);
        // console.log(char);
        smallList.push(char);
    }

// 随机验证码
    function randCode(){
        var list = numList.concat(smallList,bigList);
        var str = "";
        for(var i =0; i < 4; i++) {
            var index = Math.floor(Math.random() * list.length);
            var char = list[index];
            if (str.indexOf(char) == -1) {  // 去除重复的字符串
                str += char;
            } else {
                i--;
            }
        }
        return str;
    }
// 页面随机生成验证码
createCodeSpan.innerText = randCode(); 

    var userFlag = false;
    var pwdFlag = false;
    var emailFlag = false;
    var phoneFlag = false;
    var codeFlag = false;


// 判断用户名
    userInp.onblur = function() {
        // userFlag = false;
        var user = userInp.value;
        judgeUser(user).then((result) => {
            userSpan.textContent = result.msg;
            userSpan.className = "right";
        }).catch((result) => {
            userSpan.textContent = result.msg;
            userSpan.className = "err";
        });
    }

// 判断密码
    pwdInp.onblur = function() {
        // pwdFlag = false;
        var pwd = pwdInp.value;
        judgePwd(pwd).then((result) => {
            pwdSpan.className = "right";
            pwdSpan.innerHTML = result.msg;
        }).catch((result) =>{
            pwdSpan.className = "err";
            pwdSpan.textContent = result.msg;
        })
    }

//判断邮箱 
    emailInp.onblur = function() {
        var email = emailInp.value;
        judgeEmail(email).then((result) => {
            emailSpan.textContent = result.msg;
            emailSpan.className = "right";
        }).catch((result) => {
            emailSpan.textContent = result.msg;
            emailSpan.className = "err";
        });
    }

//判断手机号
    phoneInp.onblur = function() {
        var phone = phoneInp.value;
        judgePhone(phone).then((result) => {
            phoneSpan.textContent = result.msg;
            phoneSpan.className = "right";
        }).catch((result) => {
            phoneSpan.textContent = result.msg;
            phoneSpan.className = "err";
        });
    }

// 生成验证码
    createCodeSpan.onclick = function () {      //点击切换验证码
        createCodeSpan.innerText = randCode();  
    }
//判断验证码
    
    codeInp.onblur = function() {   
        codeFlag = false  
        var code = codeInp.value;
        var _rand = createCodeSpan.innerText;  
        judgeCode(code,_rand).then((result) => {
            codeSpan.textContent = result.msg;
            codeSpan.className = "right";
        }).catch((result) => {
            codeSpan.textContent = result.msg;
            codeSpan.className = "err";
        });           
    }

    btn.onclick = function() {

        var user = userInp.value;           
        var pwd = pwdInp.value;           
        var phone = phoneInp.value;            
        var email = emailInp.value; 
        var code = codeInp.value;
        var _rand = createCodeSpan.innerText;  

        var pList = [judgeUser(user),judgePwd(pwd),judgeEmail(email),judgePhone(phone),judgeCode(code,_rand)];
        Promise.allSettled(pList).then( list => {
            // console.log(list);
            var flag = list.every(result => result.status == "fulfilled")
            if(flag) {
                register({user,pwd,phone,email}).then(result =>{
                    if(result.status) {
                        location.href = "./login.html";
                        } else {
                            alert("注册失败");
                    }
                }).catch(err =>{
                    throw err;
                });           

            } else{
                list.forEach((result,index) => {
                    if(result.status == "fulfilled") {
                        var {value:{msg}} = result;
                        sapnList[index].className ="right";
                        sapnList[index].textContent =msg;
                        
                    } else {
                        var {reason :{msg}} = result;
                        sapnList[index].className ="err";
                        sapnList[index].textContent =msg;
                    }
                })
            }
               
        }).catch((err) => {
            console.log(222)
            console.log(err);
        })
    }

</script>

</html>